import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props'
// Utils
import { createNamespace } from '../utils'
import { inherit, emit } from '../utils/functional' // Components

import Icon from '../icon' // Types
import './style'
var _createNamespace = createNamespace('tag')
var createComponent = _createNamespace[0]
var bem = _createNamespace[1]

function Tag(h, props, slots, ctx) {
  var _style

  var type = props.type
  var mark = props.mark
  var plain = props.plain
  var color = props.color
  var round = props.round
  var size = props.size
  var key = plain ? 'color' : 'backgroundColor'
  var style = ((_style = {}), (_style[key] = color), _style)

  if (props.textColor) {
    style.color = props.textColor
  }

  var classes = {
    mark: mark,
    plain: plain,
    round: round
  }

  if (size) {
    classes[size] = size
  }

  var CloseIcon =
    props.closeable &&
    h(Icon, {
      attrs: {
        name: 'cross'
      },
      class: bem('close'),
      on: {
        click: function click(event) {
          event.stopPropagation()
          emit(ctx, 'close')
        }
      }
    })
  return h(
    'transition',
    {
      attrs: {
        name: props.closeable ? 'em-fade' : null
      }
    },
    [
      h(
        'span',
        _mergeJSXProps([
          {
            key: 'content',
            style: style,
            class: bem([classes, type])
          },
          inherit(ctx, true)
        ]),
        [slots.default == null ? void 0 : slots.default(), CloseIcon]
      )
    ]
  )
}

Tag.props = {
  size: String,
  mark: Boolean,
  color: String,
  plain: Boolean,
  round: Boolean,
  textColor: String,
  closeable: Boolean,
  type: {
    type: String,
    default: 'default'
  }
}
export default createComponent(Tag)
